<template>
    <div class="stopBox">
        <van-nav-bar title="停哪儿" left-text="返回" left-arrow right-text="意见反馈" @click-left="onClickLeft"
            @click-right="onClickRight" />
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in bannerList" :key="item.id">
                <img :src="'http://218.7.112.123:10001/'+item.advImg" alt="" />
            </van-swipe-item>
        </van-swipe>
        <div class="record" @click="gotoRecord">停车记录</div>

        <div class="bus">
            <div>
                <div class="busTips">绑定车辆</div>
                <div class="busList" @click="gotoBusList">
                    绑定列表<span class="iconfont icon-gengduo"></span>
                </div>
                <van-form @submit="onSubmit">
                    <van-field v-model="plateNo" name="plateNo" label="车牌" placeholder="车牌"
                        :rules="[{ pattern: /^[\u4e00-\u9fa5]{1}[A-Z][0-9]{5}$/, message: '车牌输入有误' }]" />
                    <van-field v-model="type" name="type" label="车型" placeholder="请输入汽油车或者新能源车"
                        :rules="[{ required: true, message: '请填写车型' }]" />
                    <div style="margin: 16px;">
                        <van-button round block type="info" native-type="submit">绑定</van-button>
                    </div>
                </van-form>
            </div>
        </div>

        <div class="stopCar">
            <div class="address">
                当前位置: {{address.province}} {{address.city}}
            </div>
            <div class="addressList">
                <div class="listOne" v-for="aitem in addressList" :key="aitem.id" @click="gotoDetail(aitem)">
                    <div class="iconfont icon-weizhi">
                        <img :src="'http://218.7.112.123:10001/'+aitem.imgUrl" alt="">
                    </div>
                    <div class="addressText">
                        <div class="parkName">{{aitem.parkName}}</div>
                        <div class="detailed">{{aitem.address}}</div>
                        <div class="vacancy">空位: {{aitem.vacancy}} 封顶价格: {{aitem.priceCaps}}</div>
                    </div>
                    <div class="distance">
                        距离 : {{aitem.distance}}km
                    </div>
                </div>
                <div class="more" @click="gotomore">
                    查看更多
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import nav from "@/mixin/nav"
import { stopBanner, stopAddCar, stopAddressList } from "@/service/stop/stopService";
import { mapState } from "vuex";
export default {
    data() {
        return {
            bannerList: [],
            plateNo: "",
            type: "",
            addressList: [],
        }
    },
    computed: {
        ...mapState(["address"])
    },
    mixins: [nav],
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        onClickRight() {
            this.$router.push("/mine/advice");
        },
        async onSubmit(val) {
            let { data } = await stopAddCar(val);
            console.log(data);
            if (data.code == 200) {
                this.$toast.success("绑定成功!");
                this.plateNo = "";
                this.type = "";
            } else {
                this.$toast.fail(data.msg);
            }
        },
        gotoDetail(item) {
            this.$router.push("/stop/detail/" + item.id);
        },
        gotoBusList() {
            this.$router.push("/stop/buslist");
        },
        gotomore() {
            this.$router.push("/stop/address");
        },
        gotoRecord() {
            this.$router.push("/stop/record");
        }
    },
    async created() {
        let { data } = await stopBanner();
        console.log(data);
        this.bannerList = data.rows;

        let { data: list } = await stopAddressList({
            pageSize: 5,
            pageNum: 1,
        });
        console.log(list);
        this.addressList = list.rows;
    }
}

</script>
<style scoped lang="scss">
body {
    height: 100%;
}

.stopBox {
    background-color: #EDEDED;
}

.more {
    height: 50px;
    line-height: 50px;
    text-align: center;
}

.record {
    margin: 15px;
    background-color: #39a9ed;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    border-radius: 10px;
}

.bus {
    height: 200px;
    margin: 15px;
    border-radius: 10px;
    background-color: #fff;
    padding: 10px;
    position: relative;

    .busList {
        position: absolute;
        right: 20px;
        top: 10px;

        span {
            font-size: 12px;
        }
    }

    .busTips {
        font-weight: 600;
        margin-bottom: 10px;
    }
}

.my-swipe .van-swipe-item {
    color: #fff;
    height: 150px;
    background-color: #39a9ed;

    img {
        width: 100%;
        height: 100%;
    }
}

.stopCar {
    background-color: #fff;
    margin: 15px;
    border-radius: 10px;
    padding: 10px;

    .addressList {
        height: 100%;


        .listOne {
            display: flex;
            align-items: center;
            padding: 5px;
            height: 80px;
            border-bottom: 1px solid #EDEDED;
            position: relative;


            .addressText {
                margin-left: 10px;

                .parkName {
                    font-weight: 600;
                }

                .detailed {
                    font-size: 12px;
                }

                .vacancy {
                    margin-top: 10px;
                    color: rgb(2, 161, 2);
                    font-size: 12px;
                }
            }

            .distance {
                position: absolute;

                bottom: 10px;
                right: 10px;
                font-size: 12px;

            }
        }
    }
}
</style>